import React from 'react'
// 导入NavHeader组件
import NavHeader from '../../components/NavHeader/index'
import { Toast } from 'antd-mobile';
import './index.css'
// 导入axios
// import axios from 'axios'
import { API } from '../../utils/api';
import { BASE_URL } from '../../utils/url';
import { Link } from 'react-router-dom';
// 覆盖物样式
const labelStyle = {
      cursor:'pointer',
      border:'0px solid rgb(255,0,0)',
      padding:'0px',
      whiteSpace:'nowrap',
      fontSize:'12px',
      color:'rgb(255,255,255)',
      textAlign:'center'
};
export default class Map extends React.Component {
  state = {
    // 小区下的房源列表
    housesList: [],
    // 是否展示房源数据列表
    isShowList:false
  }
  componentDidMount() {
     this.initMap()
  }
// 初始化地图的方法
initMap(){
       // 获取当前定位城市
      const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))
      // console.log(value);
      // 初始化地图实例
      var map = new window.BMapGL.Map("container");
      //创建地址解析器实例
      var myGeo = new window.BMapGL.Geocoder();
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(label,async (point) => {
        if(point){
        // 初始化地图
        map.centerAndZoom(point, 11);
        // 能够在其他发方法中通过this来获取地图对象
        this.map = map
        // 添加控件
        var scaleCtrl = new window.BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
          }
      }, label)
      // 调用渲染覆盖物的方法
      this.renderOverlays(value)
}
// 渲染覆盖物的入口
async renderOverlays(id) {
  try {
      // 开启loading效果
      Toast.loading('数据加载中...', 0, null, false)
      const res = await API.get(`/area/map?id=${id}`)
      if(res.status===200){
          // 关闭loading效果
          Toast.hide()
          const data = res.data.body
          // 调用 getTypeAndZoom 方法获取级别和类型
          const { nextZoom ,type } = this.getTypeAndZoom()
          data.forEach(item =>{
            // 创建覆盖物
            this.createOverlays(item, nextZoom ,type)
          })
      }
  } catch (error) {
       // 关闭loading效果
      Toast.hide()
  }
}
// 调用地图的 getZoom() 方法来获取当前缩放级别
getTypeAndZoom() {
  const zoom = this.map.getZoom()
  let nextZoom ,type
  if(zoom >= 10 && zoom < 12){
      // 区
      // 下一个级别缩放
      nextZoom = 13
      // circle 表示绘制圆形覆盖物（区、镇）
      type = 'circle'
  } else if(zoom >= 12 && zoom < 14){
      nextZoom = 15
      type = 'circle'
  }else if (zoom >= 14 && zoom < 16){
    // 小区
    type = 'rect'
  }
  return {
    nextZoom,
    type
  }
}
// 创建覆盖物
createOverlays(data,zoom,type) {
    const {
        coord: { longitude, latitude },
        label:areaName,
        count,
        value
    } = data
      const areaPoint= new window.BMapGL.Point(longitude,latitude)
  if(type==='circle'){
  // 区、镇
  this.createCircle(areaPoint, areaName, count, value, zoom)
  }else{
    // 小区
    this.createRect(areaPoint, areaName, count, value)
  }

}
// 创建区、镇覆盖物
createCircle(point,name,count,id,zoom) {
       // 创建覆盖物
        const label = new window.BMapGL.Label('', {
            position:point, // 指定文本标注所在的地理位置
            offset:new window.BMapGL.Size(-35,-35) //偏移量
        });
        // 给我们的label对象唯一标识
        label.id = id
        // 设置房源覆盖内容
        label.setContent(`
          <div class="bubble">
            <p class="name">${name}</p>
            <p>${count}套</p>
          </div>
        `)
        // 设置样式
        label.setStyle(labelStyle);
        // 设置点击样式
        label.addEventListener('click',() => {
          // 调用renderOverlays方法，获取该区域的房源数据
          this.renderOverlays(id)
          // 放大地图
          this.map.centerAndZoom(point,zoom)
          // 延迟清楚覆盖物解决js的报错问题
          setTimeout(() => {
           this.map.clearOverlays()
          }, 0);
        })
        this.map.addOverlay(label);
}
// 创建小区覆盖物
createRect(point,name,count,id) {
  // 创建覆盖物
    const label = new window.BMapGL.Label('', {
        position:point, // 指定文本标注所在的地理位置
        offset:new window.BMapGL.Size(-50,-28) //偏移量
    });
    // 给我们的label对象唯一标识
    label.id = id
    // 设置房源覆盖内容
    label.setContent(`
      <div class="rect">
        <span class="housename">${name}</span>
        <span class="housenum">${count}套</span>
        <i class="arrow"></i>
      </div>
    `)
    // 设置样式
    label.setStyle(labelStyle);
    // 设置点击样式
    label.addEventListener('click',(e) => {
      // 点击获取小区房源数据的方法
        this.getHousesList(id)
        console.log('打印数据：',e);
    })
    this.map.addOverlay(label);
}
// 获取小区房源数据的方法
async getHousesList(id){
  try {
      Toast.loading('数据加载中...', 0, null, false)
      const res =await API.get(`/houses?cityId=${id}`)
      // 关闭loading效果
      Toast.hide()
      this.setState({
        housesList:res.data.body.list,
        //  展示房源数据列表
        isShowList:true
      })
  } catch (error) {
    // 关闭loading效果
      Toast.hide()
  }
}
  render() {
    return (
      
      <div className="map">
        {/* 顶部导航栏组件 */}
         <NavHeader>地图找房</NavHeader>
        {/* 地图容器元素 */}
        <div id="container">
        </div>
        {/* 房源列表数据区域 houseList */}
        <div className={this.state.isShowList?'houseList show':''}>
          <div className="titleWrap">
            <h1 className="listTitle">房屋列表</h1>
            <Link className="titleMore" to="/home/list">
              更多房源
            </Link>
          </div>
          <div className="houseItems">
              {/* 房源结构 */}
              {this.state.housesList.map(item =>  
              <div className="house" key={item.houseCode}>
              {/* 左边结构图片 */}
              <div className="imgWrap">
                <img className="img" src={BASE_URL + item.houseImg} alt="" />
              </div>
              {/* 右边结构内容 */}
              <div className="content">
                <h3 className="titles">
                  {item.title}
                </h3>
                <div className="desc">{item.desc}</div>
                <div>
                  {
                    item.tags.map(tag =>
                       <span className='tag' key={tag}>{tag}</span>)
                  }
                </div>
                <div className="price">
                  <span className="priceNum">{item.price}</span> 元/月
                </div>
              </div>
            </div>)}
          </div>
        </div>
      </div>
    )
  }
}
